<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners"  :title="title" width="600px" @close="onClose">
      <el-form ref="elForm" :model="elForm" :rules="rules" label-width="120px" >
        <el-form-item label="任务名称" prop="tasksName">
          <el-input v-model="elForm.tasksName" :disabled="true" placeholder="请输入任务名称" />
          <div class="sub-title">注：自动生成名称无需填写</div>
        </el-form-item>
        <el-form-item label="运行的分组名称" prop="tasksOption">
          <el-select v-model="elForm.tasksOption" placeholder="请选择运行的分组名称" filterable clearable
                     :style="{width: '100%'}">
            <el-option v-for="(item, index) in parentList" :key="index" :label="item.parentCategoryName"
                       :value="item.parentCategoryId" :disabled="item.disabled"></el-option>
          </el-select>
          <div class="sub-title">选择文章标题分组，默认读取这一个组里面的所有已经生成的标题</div>
        </el-form-item>
        <el-form-item label="请求次数" prop="repetitionsPerRequest" >
          <el-input-number v-model="elForm.repetitionsPerRequest" :min="1" :max="100"  placeholder="请输入请求次数" label="描述文字"></el-input-number>
          <div class="sub-title">注：请求十次，就是创建十篇文章，最大一百篇</div>
        </el-form-item>
      </el-form>
      <div class="sub-title">注：</div>
      <div class="sub-title">默认读取你创建的标题，按照创建时间顺序读取，如果标题不够，将会重复读取写第二遍。</div>
      <div class="sub-title">后期会开发是否开启标题重写功能，目前暂未考虑。</div>
      <div class="sub-title">文章创建可能会比较缓慢，请耐心等待。</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const { wpArticles } = require('@/api/tasks/tasks')
export default {
  name: 'articlesTasks',
  props: {
    title: {
      type: String,
      default: '创建文章任务(注意，这是写文章！)'
    },
    parentList: {
      type: Array,
      default: () => [
        {
          "parentCategoryName": "默认数据1",
          "parentCategoryId": 1
        }, {
          "parentCategoryName": "默认数据2",
          "parentCategoryId": 2
        }
      ]
    }
  },
  data() {
    return {
      elForm: {
        tasksName: '',
        tasksOption: null,
        repetitionsPerRequest: null
      },
      rules: {
        tasksOption: [{ required: true, message: '请选择运行的分组名称', trigger: 'change' }],
        repetitionsPerRequest: [
          { required: true, message: '请输入请求次数', trigger: 'blur' },
          { type: "number", min: 1, max: 100, message: "请求次数必须在1到100之间", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    getCurrentDateTime() {
      const now = new Date();
      const month = now.getMonth() + 1; // 月份从0开始，所以需要加1
      const date = now.getDate();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const formattedDateTime = `${month}-${date}-${hours}-${minutes}`;
      return formattedDateTime;
    },
    submitForm() {
      //TODO 需要加一个事件校验一下，是否有写标题
      console.log(this.elForm)
      // 在提交表单之前，根据选中的下拉框值生成任务名称
      let tasksOption = parseInt(this.elForm.tasksOption);
      const selectedItem = this.parentList.find(item => item.parentCategoryId === tasksOption);
      if (selectedItem) {
        this.elForm.tasksName = this.getCurrentDateTime()+"-"+`${selectedItem.parentCategoryName}-${this.elForm.repetitionsPerRequest}-写文章`;
      }else {
        this.$modal.msgError("请选择分组名称");
        return
      }
      this.elForm.tasksType = 2;
      this.elForm.openaiMsgGroupsId = 2;
      console.log(this.elForm)
      this.$refs['elForm'].validate(valid => {
        if (valid) {

          wpArticles(this.elForm).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
          });
          this.$emit('update:visible', false);
          this.close();
        }
      });
    },
    onOpen() {

    },
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.$emit('update:visible', false)
    }
  }
};
</script>

<style scoped>
.sub-title {
  color: #999;
  font-size: 12px;
  margin-top: 5px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
